<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单状态</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="renderer" content="webkit" />
    <link rel="icon" type="image/png" href="../assets/i/favicon.png" />
    <link rel="stylesheet" href="../assets/css/amazeui.min.css" />
    <link rel="stylesheet" href="../assets/css/app2.css" />
    <link rel="stylesheet" href="../assets/css/icon2.css"/>
    <style type="text/css">
        p{margin: 0;}
        ul, li{padding: 0;margin: 0;list-style: none}
        .products-list ul li{color: #808080;font-size: 14px;padding: 0 15px}
        .numLi p span{width: 100%;display: block;height: 25px;color: #000000;font-weight: bold;}
        [class*=am-u-]{padding: 0;}
        span.am-fr{color: #333333}
        .navList{display: flex;padding: 15px 0;}
        .green{font-weight: normal;color: #09bb07}
        hr{margin: 0;}
        .ti{color: #000000;margin-right: 10px;}
        .car{overflow: hidden; text-overflow: ellipsis;white-space: nowrap;}
        .am-btn-default{border-color: #dfdfdf;}
        .am-modal-dialog{border-radius: 5px;}
        .am-modal-hd{padding: 30px 10px;}
        .am-modal-footer{display: block;}
        .am-modal-btn{display: inline-block !important}
        .am-btn2{width: 90px;height: 30px;line-height: 30px;border-radius: 5px !important; font-size: 1.4rem;color: #a6a6a6;background-color: #fff;border: 1px solid #dcdcdc !important;}
        .red{background-color: #fb5e53;color: #FFFFFF;}
        .am-u-sm-2{width: 20%;text-align: right;color: #09bb07}
    </style>
</head>
<body>
<div class="am-modal am-modal-confirm" tabindex="-1" id="my-confirm">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">确认进入下一个流程？</div>
        <div class="am-modal-footer">
            <span class="am-modal-btn btn am-btn2 am-btn-default" style="margin-right: 15px;" data-am-modal-cancel>取消</span>
            <span class="am-modal-btn btn am-btn2 am-btn-default red" data-am-modal-confirm>确定</span>
        </div>
    </div>
</div>

<div class="am-modal am-modal-confirm" tabindex="-1" id="my-confirm2">
    <div class="am-modal-dialog">
        <div class="am-modal-hd" style="padding: 30px 60px;">不在服务时间段内,无法提供服务。</div>
        <div class="am-modal-footer">
            <span class="am-modal-btn btn am-btn2 am-btn-default" style="margin-right: 15px;" data-am-modal-cancel>取消</span>
            <span class="am-modal-btn btn am-btn2 am-btn-default red" data-am-modal-confirm>确定</span>
        </div>
    </div>
    <div style="margin-top: 10px;">
        <p class="am-text-xs" style="color: #FFFFFF;text-align: left;">说明：</p>
        <p class="am-text-xs" style="color: #FFFFFF;text-align: left;">1.洗车订单只有当天的预约时间；</p>
        <p class="am-text-xs" style="color: #FFFFFF;text-align: left;">2.检测和保养订单可以预约今天，明天，后天三天的订单。确认订单后，该订单状态更改为进行中；</p>
        <p class="am-text-xs" style="color: #FFFFFF;text-align: left;margin-top: 15px;">服务时间段可以是明天后天，确认订单之后，按钮改为接车在途，接车在途按钮在预约接车时间前一个小时才可以点击。</p>
    </div>
</div>

<div style="border-top:1px solid #d9d9d9;border-bottom: 1px solid #d9d9d9;padding: 0 15px;background-color: #fff;margin-top: 10px;">
    <div class="navList clearfix">
        <aside class="am-u-sm-3 am-list-thumb no-right-p">
            <img src="../assets/i/examples/123.png" style="border-radius: 8px;" alt="">
        </aside>
        <section class="am-u-sm-9 am-list-main">
            <p class="am-text-sm" style="color: #000">姓名: 陈光</p>
            <p class="am-text-sm car">车辆信息 ：粤B28765  雪佛兰 科鲁兹1.6T</p>
            <p class="am-text-sm">电话：<a style="color: #000">15012797692</a></p>
        </section>
    </div>
    <hr />
    <div class="navList clearfix">
        <ul class="am-u-sm-10">
            <li style="margin-bottom: 5px;"><p class="am-text-sm">接车时间：<span class="green">2015-06-06&nbsp;&nbsp;14:30-15:00</span></p></li>
            <li><p class="am-text-sm">送车时间：<span class="green">2015-06-06&nbsp;&nbsp;16:00</span></p></li>
        </ul>
        <p class="am-text-sm am-u-sm-2" style="line-height: 50px;">接车在途</p>
    </div>
</div>

<div class="products-list" style="border-top:1px solid #d2d2d2;margin-top: 10px;">
    <ul>
        <li class="change">
            <span class="am-fl ti">位置</span>
            <span>北京市海淀区五道口王庄路36号院</span>
            <span class="am-fr">
                <i class="ui-fonts icon-chevron-right am-fr right ">&#xe601;</i>
            </span>
        </li>
        <li class="change">
            <span class="am-fl ti">指定服务位置</span>
            <span>北京市海淀区洗车店</span>
            <span class="am-fr">
                <i class="ui-fonts icon-chevron-right am-fr right ">&#xe601;</i>
            </span>
        </li>
    </ul>
</div>

<section class="kuaikuai-btn2 am-topbar-fixed-bottom" style="height: 120px;text-align: center;">
    <button type="submit" id="doc-modal-ok" class="btn am-btn am-btn-danger am-btn-lg am-btn-buy" style="margin-bottom: 10px;">确认订单/接车在途</button>
    <button type="submit" id="doc-modal-list" class="btn am-btn am-btn-default am-btn-lg am-btn-buy">送车到店</button>
</section>
<script src="../assets/js/jquery.min.js" type="text/javascript"></script>
<script src="../assets/js/amazeui.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
        $('#doc-modal-list').on('click', function() {
            $('#my-confirm').modal({
                relatedTarget: this,
                onConfirm: function(options) {
                    alert("确定了");
                },
                // closeOnConfirm: false,
                onCancel: function() {
                    alert('算求，不弄了');
                }
            });
        });

        $('#doc-modal-ok').on('click', function() {
            $('#my-confirm2').modal({
                relatedTarget: this,
                onConfirm: function(options) {
                    alert("确定了");
                },
                // closeOnConfirm: false,
                onCancel: function() {
                    alert('算求，不弄了');
                }
            });
        });
    });
</script>
</body>
</html>